<template>
	<view class="body">
		<view class="topbar">
			<view class="li" @click="handleClick(1)">
				<view class="text">{{typeStatus || '综合'}}</view>
				<u-icon name="arrow-down" color="#999" size="28"></u-icon>
			</view>
			<view class="li" @click="handleClick(2)">
				<view class="text">{{price || '价格'}}</view>
				<u-icon name="arrow-down" color="#999" size="28"></u-icon>
			</view>
			<view class="li" @click="handleClick(3)">
				<view class="text">{{address || '取货点'}}</view>
				<u-icon name="arrow-down" color="#999" size="28"></u-icon>
			</view>
			<view class="li" @click="handleClick(4)">
				<view class="text">{{address2 || '收货点'}}</view>
				<u-icon name="arrow-down" color="#999" size="28"></u-icon>
			</view>
		</view>
		<view class="list">
			<block v-if="recordList && recordList.length > 0">
				<view class="li" v-for="item,index in recordList" :key="index" @click="handleInfo(item)">
					<view class="left">
						<image :src="item.delivery_photo_url" mode=""></image>
					</view>
					<view class="right">
						<view class="top">
							<view class="title">{{item.cargo_info}}</view>
							<view class="size"><text>尺寸：</text>小</view>
						</view>
						<view class="center">
							<text>{{item.pickup_location}}</text>
							<text class="line">至</text>
							<text>{{item.delivery_location}}</text>
						</view>
						<view class="bottom">
							<view class="text"><text>送件期限：</text>{{moment(item.pickup_time).format("YYYY-MM-DD")}}
							</view>
							<view class="price">￥{{item.reward_amount}}</view>
						</view>
					</view>
				</view>
			</block>
			<u-empty text="暂无数据" mode="data" v-else></u-empty>
		</view>
		<!-- 筛选 -->
		<u-select v-model="showModel" :list="modelList" @confirm="handleChange"></u-select>
		<!-- 地点选择 -->
		<area-select ref='areaChoose' @confirm='areaConfirm'></area-select>
	</view>
</template>

<script>
	import App from '@/App.vue'
	import moment from '@/common/moment';
	import areaSelect from '@/components/area-choose/area-choose.vue'
	export default {
		components: {
			areaSelect
		},
		data() {
			return {
				modelType: undefined,
				showModel: false,
				modelList: [],
				list: [{
						value: '1',
						label: '最近活跃'
					},
					{
						value: '2',
						label: '离我最近'
					},
					{
						value: '3',
						label: '信用排序'
					}
				],
				priceList: [{
						value: '1',
						label: '价格从高到低'
					},
					{
						value: '2',
						label: '价格从低到高'
					}
				],
				queryForm: {
					status: "",
					user_id: "",
					date_from: "",
					date_to: "",
					location: "",
					reward_range: "",
					pickup_location: "",
					delivery_location: "",
					reward_range: "",
					ordering: "",
				},
				recordList: [],
				areaValue: [],
				typeStatus: "",
				price: "",
				address: "",
				address2: "",
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			moment,
			//获取列表
			getList() {
				this.$Api.getRewardList(this.queryForm).then(res => {
					// console.log('获取列表', res)
					this.recordList = res.result
					res.result.map((item) => {
						return App.globalData.requestUrl + '/media/' + item.delivery_photo_url
					})
				}, err => {
					console.log(err)
				})
			},
			//查看详情
			handleInfo(item) {
				uni.navigateTo({
					url: "/pages/index/info?rid=" + item.rid
				})
			},
			//公共点击事件
			handleClick(type) {
				this.modelType = type
				if (type == 1) { //综合
					this.modelList = this.list
					this.showModel = true
				} else if (type == 2) { //价格
					this.modelList = this.priceList
					this.showModel = true
				} else if (type == 3) { //取货点
					this.$refs.areaChoose.show()
				} else if (type == 4) { //收货点
					this.$refs.areaChoose.show()
				}
			},
			//筛选
			handleChange(e) {
				if (this.modelType == 1) {
					if (e[0].value == '1') {
						this.queryForm.ordering = 'latest'
						this.typeStatus = '最近活跃'
					} else if (e[0].value == '2') {
						this.queryForm.ordering = 'urgent'
						this.typeStatus = '离我最近'
					} else if (e[0].value == '3') {
						this.queryForm.ordering = 'urgent'
						this.typeStatus = '信用排序'
					}
				} else if (this.modelType == 2) {
					if (e[0].value == '1') {
						this.queryForm.ordering = 'highest_reward'
						this.price = '从高到低'
					} else if (e[0].value == '2') {
						this.queryForm.ordering = 'lowest_reward'
						this.price = '从低到高'
					}
				}
				this.getList()
			},
			//确认地址选择
			areaConfirm(e) {
				console.log(e);
				if (this.modelType == 3) {
					this.queryForm.pickup_location = e.address
					this.address = e.addressList[2]
				} else if (this.modelType == 4) {
					this.queryForm.delivery_location = e.address
					this.address2 = e.addressList[2]
				}
				this.getList()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.body {

		.topbar {
			width: 100%;
			background: #fff;
			padding: 30upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			left: 0;
			z-index: 99;

			.li {
				display: flex;
				align-items: center;
				justify-content: center;

				.text {
					margin-right: 20upx;
				}
			}
		}

		.list {
			width: 94%;
			margin: 0 auto;
			padding-top: 17%;

			.li {
				width: 100%;
				background: #fff;
				border-radius: 20upx;
				padding: 30upx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-bottom: 30upx;

				.left {
					width: 140upx;
					height: 140upx;
					border-radius: 10upx;
					overflow: hidden;
					flex-shrink: 0;

					image {
						width: 100%;
						height: 100%;
						display: block;
						margin: 0 auto;
					}
				}

				.right {
					flex: 1;
					margin-left: 30upx;

					.top {
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 2upx solid #e5e5e5;
						padding-bottom: 10upx;

						.title {}

						.size {
							text {
								color: #999;
							}
						}
					}

					.center {
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 2upx solid #e5e5e5;
						margin: 10upx 0;
						padding-bottom: 10upx;

						text {
							color: #414141;
						}

						.line {
							color: #999;
							margin: 0 10upx;
						}
					}

					.bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.text {
							text {
								color: #999;
							}
						}

						.price {
							color: #ff0000;
							font-size: 32upx;
						}
					}
				}
			}
		}
	}
</style>